<template>
  <div class="student-page">
    <el-card shadow="never" border="false">
      <template #header>
        <div class="header">
          <span>学员管理</span>
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            round
            @click="visible = true"
          >
            添加学员
          </el-button>
        </div>
      </template>
      <el-table
        stripe
        :data="tableData"
        border
        style="width: 100%"
        height="100vh"
      >
        <el-table-column
          align="center"
          prop="id"
          label="学员id"
          min-width="30%"
        />
        <el-table-column
          align="center"
          prop="name"
          label="姓名"
          min-width="30%"
        />
        <el-table-column align="center" prop="phone" label="手机号" />
        <el-table-column
          align="center"
          prop="salary"
          label="期望薪资"
          min-width="35%"
        />
        <el-table-column
          align="center"
          prop="truesalary"
          label="实际薪资"
          min-width="35%"
        />
        <el-table-column align="center" prop="province" label="籍贯(省)" />
        <el-table-column align="center" prop="city" label="籍贯(市)" />
        <el-table-column align="center" prop="county" label="籍贯(县)" />

        <el-table-column prop="phone" label="操作">
          <template #default="{ row }">
            <el-button size="mini" @click="delStudent(row.id)">删除</el-button>
            <el-button size="mini" type="danger" @click="getStudentByID(row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-drawer :title="title" :visible.sync="visible" size="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="期望薪资" prop="salary">
          <el-input v-model="ruleForm.salary"></el-input>
        </el-form-item>
        <el-form-item label="实际薪资" prop="truesalary">
          <el-input v-model="ruleForm.truesalary"></el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="8">
              <el-select
                v-model="ruleForm.province"
                placeholder="请选择省份"
                @change="getCity"
              >
                <el-option
                  v-for="item in provinces"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select
                v-model="ruleForm.city"
                placeholder="请选择市"
                @change="getCounty"
              >
                <el-option
                  v-for="item in cites"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select v-model="ruleForm.county" placeholder="请选择区">
                <el-option
                  v-for="item in countes"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {
  addStudentAPI,
  deleteStudentAPI,
  getCityAPI,
  getCountyAPI,
  getProvinceAPI,
  getStudentAPI,
  getStudentByIDAPI,
  updataStudentByIDAPI
} from '@/api/user'
export default {
  name: 'StudentIndex',
  async created () {
    this.getStudent()
    const res = await getProvinceAPI()
    this.provinces = res.data
  },
  data () {
    return {
      provinces: [],
      cites: [],
      countes: [],
      ruleForm: {
        name: '',
        age: '',
        sex: '',
        phone: '',
        salary: '',
        truesalary: '',
        province: [],
        city: [],
        county: []
      },
      rules: {
        name: [{ required: true, message: '不能为空' }],
        age: [{ required: true, message: '不能为空' }],
        sex: [{ required: true, message: '不能为空' }],
        phone: [{ required: true, message: '不能为空' }],
        salary: [{ required: true, message: '不能为空' }],
        truesalary: [{ required: true, message: '不能为空' }]
        // province: [
        //   {
        //     type: 'array',
        //     required: true,
        //     message: '不能为空',
        //     trigger: 'change'
        //   }
        // ],
        // city: [
        //   {
        //     type: 'array',
        //     required: true,
        //     message: '不能为空',
        //     trigger: 'change'
        //   }
        // ],
        // county: [
        //   {
        //     type: 'array',
        //     required: true,
        //     message: '不能为空',
        //     trigger: 'change'
        //   }
        // ]
      },
      visible: false,
      tableData: []
    }
  },
  methods: {
    async delStudent (id) {
      try {
        await this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
        const res = await deleteStudentAPI(id)

        // 二次确认
        console.log('res  ----->  ', res)
        // 删除成功提示
        if (res.data.code !== 0) this.$message.error(res.data.message)
        this.getStudent()
        this.$message.success(res.data.message)
      } catch (error) {
        this.$message.info('您取消了操作')
      }
    },
    async getStudent () {
      const res = await getStudentAPI()
      // console.log('res  ----->  ', res)
      this.tableData = res.data.data
    },
    async submit () {
      try {
        await this.$refs.ruleForm.validate()
        if (this.ruleForm.id) {
          const res = await updataStudentByIDAPI(this.ruleForm)

          if (res.data.code === 0) this.$message.success(res.data.message)
        } else {
          const res = await addStudentAPI(this.ruleForm)
          if (res.data.code === 0) this.$message.success(res.data.message)
        }
        this.getStudent()
        this.visible = false
      } catch (error) {
        console.log('error  ----->  ', error)
      }
    },
    cancel () {
      this.visible = false
    },
    resetByCancel () {
      console.log('重置粗发了  ----->  ')
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        name: '',
        age: '',
        sex: '',
        phone: '',
        salary: '',
        truesalary: '',
        province: [],
        city: [],
        county: []
      }
    },
    async getStudentByID (id) {
      const res = await getStudentByIDAPI(id)
      console.log('res  ----->  ', res)

      this.visible = true
      this.ruleForm = res.data.data
    },
    async getCity () {
      // 省改变市和区清空
      this.ruleForm.city = []
      this.ruleForm.county = []
      const res = await getCityAPI(this.ruleForm.province)

      this.cites = res.data
    },
    async getCounty () {
      // 市改变区清空
      this.ruleForm.county = []
      const res = await getCountyAPI(
        this.ruleForm.province,
        this.ruleForm.city
      )

      this.countes = res.data
    }
  },
  watch: {
    visible (newValue, oldValue) {
      if (!newValue) {
        this.resetByCancel()
      }
    }
  },
  computed: {
    title () {
      if (this.ruleForm.id) return '编辑学员'
      return '添加学员'
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 16px;
  }
  .actions {
    font-size: 18px;
    display: flex;
    justify-content: space-around;
    color: #666;
    > i:hover {
      color: rgba(114, 124, 245, 1);
      cursor: pointer;
    }
  }
}
</style>
